<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- art-template是js库，是一个简约、超快的模板引擎，用于简化拼接字符串，把js数据传到html中展示出来 -->
    <script src="js/template-web.js"></script>


</head>

<body>
    <!-- 
        
        {{ 对象中的属性名 }}

        类似于js中的for循环
        {{ each 数据 value   index}}
        

        {{ /each }}

        类似于js中的if判断

        {{if  条件}}

        {{ /if }}

    -->



    <!-- 定义模板 -->
    <script type="text/html" id="demo">
        <div>{{name}}</div>
        <div>{{age}}</div>
        <div>{{sex}}</div>
        <div>
            {{ each datas value index}}
                <p>{{value}}{{index}}</p>
            {{ /each }}
        </div>
    </script>


    <!-- 定义一个容器 -->
    <div id="mydiv"></div>
    <div id="mydiv2"></div>

    <script>
        // js中的数据
        var user = {
            name: "alice",
            age: 20,
            sex: "男",
            datas: [
                "aaa",
                "bbb",
                "ccc"
            ]
        };

        //    template(模板id,对象);
        //    var str= template("demo",user);
        //    var mydiv=document.getElementById("mydiv");
        //    mydiv.innerHTML=str;


        var s = "<div><p>{{name}}</p><p>{{age}}</p><p>{{sex}}</p></div>";
        var strs = template.render(s, user);
        var mydiv2 = document.getElementById("mydiv2");
        mydiv2.innerHTML = strs;

    </script>

</body>

</html>